<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<link rel="stylesheet" href="../Bootstrap4.6.1/css/bootstrap.css">
		<script src="../Bootstrap4.6.1/js/jquery.js"></script>
		<script src="../Bootstrap4.6.1/js/bootstrap.bundle.js"></script>
	</head>
	<body>
		<!-- 顶部logo -->
		<div class=" px-md-5">
			<div class="clearfix mx-md-5 px-md-5 mt-2">
				<div class="float-left"><img src="./img/logo.jpg" alt=""></div>
				<div class="float-right mt-2">
					<form class="form-inline my-2 my-lg-0">
						<input class="form-control rounded-0 border border-success" type="search" placeholder="Search"
							aria-label="Search">
						<button class="btn btn-success my-2 my-sm-0 rounded-0" type="submit">Search</button>
					</form>
				</div>
			</div>
		</div>
		<!-- 顶部logo end  -->
		<!-- 导航条 -->
		<div class="px-md-5 bg-success">
			<div class="mx-md-5 px-md-5">
				<nav class="navbar navbar-expand-md navbar-dark bg-success py-0">
					<a class="navbar-brand py-2 px-5" style="background-color: #17775c;" href="#">全部课程</a>
					<button class="navbar-toggler" type="button" data-toggle="collapse"
						data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
						aria-expanded="false" aria-label="Toggle navigation">
						<span class="navbar-toggler-icon"></span>
					</button>
					<!-- 通过弹性盒子数学，让导航条右对齐 -->
					<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
						<!-- ul元素的 mr-auto 类要删除 -->
						<ul class="navbar-nav ">
							<li class="nav-item active">
								<a class="nav-link" href="#">首页 </a>
							</li>
							<li class="nav-item active">
								<a class="nav-link" href="#">前端技术</a>
							</li>
							<li class="nav-item active">
								<a class="nav-link" href="#">最新技术</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">教程API</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">留言板</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">关于</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">登录</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#">注册</a>
							</li>
						</ul>
					</div>
				</nav>
			</div>
		</div>
		<!-- 导航条 end -->
		<!-- 轮播图 -->
		<div id="carouselExampleIndicators" class="carousel slide" data-interval="1000" data-ride="carousel">
			<ol class="carousel-indicators">
				<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
				<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
			</ol>
			<div class="carousel-inner">
				<div class="carousel-item active">
					<img src="./img/banner1.jpg" class="d-block w-100" alt="...">
				</div>
				<div class="carousel-item">
					<img src="./img/banner2.jpg" class="d-block w-100" alt="...">
				</div>
			</div>
			<button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators"
				data-slide="prev">
				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</button>
			<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators"
				data-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</button>
		</div>
		<!-- 轮播图 end -->
		<!-- 图文列表 -->
		<div class=" px-md-5">
			<div class="clearfix mx-md-5 px-md-5 mt-2">
				<h1>前端技术</h1>
				<div class="row">
					<div class="col-6 col-md-4 col-lg-3">
						<!-- 卡片 -->
						<div class="card border-0" >
							<img src="./img/sass.png" class="card-img-top img-thumbnail" alt="...">
							<div class="card-body">
								<h5 class="card-title">jQuery API</h5>
								<p class="card-text">根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册。</p>
								<a href="#" class="btn btn-primary">详情</a>
							</div>
						</div>
					</div>
					<div class="col-6 col-md-4 col-lg-3">
						<!-- 卡片 -->
						<div class="card border-0" >
							<img src="./img/sass.png" class="card-img-top img-thumbnail" alt="...">
							<div class="card-body">
								<h5 class="card-title">jQuery API</h5>
								<p class="card-text">根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册。</p>
								<a href="#" class="btn btn-primary">详情</a>
							</div>
						</div>
					</div>
					<div class="col-6 col-md-4 col-lg-3">
						<!-- 卡片 -->
						<div class="card border-0" >
							<img src="./img/sass.png" class="card-img-top img-thumbnail" alt="...">
							<div class="card-body">
								<h5 class="card-title">jQuery API</h5>
								<p class="card-text">根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册。</p>
								<a href="#" class="btn btn-primary">详情</a>
							</div>
						</div>
					</div>
					<div class="col-6 col-md-4 col-lg-3">
						<!-- 卡片 -->
						<div class="card border-0" >
							<img src="./img/sass.png" class="card-img-top img-thumbnail" alt="...">
							<div class="card-body">
								<h5 class="card-title">jQuery API</h5>
								<p class="card-text">根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册。</p>
								<a href="#" class="btn btn-primary">详情</a>
							</div>
						</div>
					</div>
					<div class="col-6 col-md-4 col-lg-3">
						<!-- 卡片 -->
						<div class="card border-0" >
							<img src="./img/sass.png" class="card-img-top img-thumbnail" alt="...">
							<div class="card-body">
								<h5 class="card-title">jQuery API</h5>
								<p class="card-text">根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册。</p>
								<a href="#" class="btn btn-primary">详情</a>
							</div>
						</div>
					</div>
					<div class="col-6 col-md-4 col-lg-3">
						<!-- 卡片 -->
						<div class="card border-0" >
							<img src="./img/sass.png" class="card-img-top img-thumbnail" alt="...">
							<div class="card-body">
								<h5 class="card-title">jQuery API</h5>
								<p class="card-text">根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册。</p>
								<a href="#" class="btn btn-primary">详情</a>
							</div>
						</div>
					</div>
					<div class="col-6 col-md-4 col-lg-3">
						<!-- 卡片 -->
						<div class="card border-0" >
							<img src="./img/sass.png" class="card-img-top img-thumbnail" alt="...">
							<div class="card-body">
								<h5 class="card-title">jQuery API</h5>
								<p class="card-text">根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册。</p>
								<a href="#" class="btn btn-primary">详情</a>
							</div>
						</div>
					</div>
					<div class="col-6 col-md-4 col-lg-3">
						<!-- 卡片 -->
						<div class="card border-0" >
							<img src="./img/sass.png" class="card-img-top img-thumbnail" alt="...">
							<div class="card-body">
								<h5 class="card-title">jQuery API</h5>
								<p class="card-text">根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册。</p>
								<a href="#" class="btn btn-primary">详情</a>
							</div>
						</div>
					</div>
					<div class="col-6 col-md-4 col-lg-3">
						<!-- 卡片 -->
						<div class="card border-0" >
							<img src="./img/sass.png" class="card-img-top img-thumbnail" alt="...">
							<div class="card-body">
								<h5 class="card-title">jQuery API</h5>
								<p class="card-text">根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册。</p>
								<a href="#" class="btn btn-primary">详情</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 图文列表 end-->
	</body>
</html>
